<template>
	<div class="detail">
		<el-form :model="ruleForm" label-position="top" label-width="100px">
			<div class="order-header">
				<h3>{{ ruleForm.name }}</h3>
			</div>
			<div class="order-body">
				<div class="card info" @click="visible = true">
					<ul class="clearfix">
						<li>
							<span>客户名称</span>
							<el-input v-model="userinfo.kehuchenghu" readonly></el-input>
						</li>
						<li>
							<span>方案设计</span>
							<el-input v-model="userinfo.shejishi" readonly></el-input>
						</li>
						<li>
							<span>方案面积</span>
							<el-input v-model="ruleForm.projectSize" readonly>
								<template slot="append">㎡</template>
							</el-input>
						</li>
						<li>
							<span>制单日期</span>
							<el-input type="text" :value="$init.time(ruleForm.projectDate)" readonly></el-input>
						</li>
						<li>
							<span>客户地址</span>
							<el-input v-model="ruleForm.customerAds" readonly></el-input>
						</li>
					</ul>
				</div>
				<div class="card" v-for="(obj, index) in data" :key="index">
					<template v-if="obj.data.length !== 0">
						<div class="card-header">
							<i class="el-icon-arrow-right"></i>
							<span>{{ obj.name }}</span>
						</div>
						<div class="card-body" ref="data">
							<table class="table">
								<thead>
									<tr>
										<th rowspan="2">#</th>
										<th rowspan="2">名称/品牌</th>
										<th rowspan="2">图片</th>
										<th rowspan="2">功能作用</th>
										<th rowspan="2">单位</th>
										<th rowspan="2">销售价格</th>
										<th colspan="10">对比方案</th>
									</tr>
									<tr>
										<template v-if="temp.a1 !== 0">
											<th>数量</th>
											<th>方案1</th>
										</template>
										<template v-if="temp.a2 !== 0">
											<th>数量</th>
											<th>方案2</th>
										</template>
										<template v-if="temp.a3 !== 0">
											<th>数量</th>
											<th>方案3</th>
										</template>
										<template v-if="temp.a4 !== 0">
											<th>数量</th>
											<th>方案4</th>
										</template>
										<template v-if="temp.a5 !== 0">
											<th>数量</th>
											<th>方案5</th>
										</template>
									</tr>
								</thead>
								<tbody>
									<template v-for="(item, b) in obj.data">
										<template v-if="item.a1.num == 0 &&
											item.a2.num == 0 &&
											item.a3.num == 0 &&
											item.a4.num == 0 &&
											item.a5.num == 0"></template>
										<template v-else>
											<tr :key="b">
												<td>{{ b + 1 }}</td>
												<td width="100">
													<span class="content">{{ item.name }}</span>
												</td>
												<td width="80">
													<img :src="`http://101.37.16.149/clientmanage/public/upload/${item.pic}`"
														alt="" class="thumb" v-img-preview>
												</td>
												<td width="170">
													<span class="content">{{ item.content }}</span>
												</td>
												<td>{{ item.unit }}</td>
												<td class="price">{{ $init.numberFormat(item.sellprice) }}</td>
												<template v-if="temp.a1 !== 0">
													<td class="price">
														{{ item.a1.num }}
													</td>
													<td class="price">
														￥{{ item.a1.num !== '' ? $init.numberFormat(item.sellprice *
															s2n(item.a1.num)) : 0 }}
													</td>
												</template>
												<!-- a1 -->
												<template v-if="temp.a2 !== 0">
													<td class="price">
														{{ item.a2.num }}
													</td>
													<td class="price">
														￥{{ item.a2.num !== '' ? $init.numberFormat(item.sellprice *
															s2n(item.a2.num)) : 0 }}
													</td>
												</template>
												<!-- a1 -->
												<template v-if="temp.a3 !== 0">
													<td class="price">
														{{ item.a3.num }}
													</td>
													<td class="price">
														￥{{ item.a3.num !== '' ? $init.numberFormat(item.sellprice *
															s2n(item.a3.num)) : 0 }}
													</td>
												</template>
												<!-- a1 -->
												<template v-if="temp.a4 !== 0">
													<td class="price">
														{{ item.a4.num }}
													</td>
													<td class="price">
														￥{{ item.a4.num !== '' ? $init.numberFormat(item.sellprice *
															s2n(item.a4.num)) : 0 }}
													</td>
												</template>
												<!-- a1 -->
												<template v-if="temp.a5 !== 0">
													<td class="price">
														{{ item.a5.num }}
													</td>
													<td class="price">
														￥{{ item.a5.num !== '' ? $init.numberFormat(item.sellprice *
															s2n(item.a5.num)) : 0 }}
													</td>
												</template>
											</tr>
										</template>
									</template>
								</tbody>
							</table>
						</div>
					</template>
				</div>
				<div class="card">
					<div class="card-header selected">
						<span>价格合计</span>
					</div>
					<div class="card-body active total">
						<div class="table-head">
							<div class="name">方案版本号</div>
							<el-checkbox-group v-model="checked" :min="1" :max="3" @change="fangan(checked)">
								<template v-if="temp.a1 !== 0">
									<el-checkbox label="方案1"></el-checkbox>
								</template>
								<template v-if="temp.a2 !== 0">
									<el-checkbox label="方案2"></el-checkbox>
								</template>
								<template v-if="temp.a3 !== 0">
									<el-checkbox label="方案3"></el-checkbox>
								</template>
								<template v-if="temp.a4 !== 0">
									<el-checkbox label="方案4"></el-checkbox>
								</template>
								<template v-if="temp.a5 !== 0">
									<el-checkbox label="方案5"></el-checkbox>
								</template>
							</el-checkbox-group>
						</div>
						<div class="table-body">
							<div class="name">方案总价格</div>
							<div class="th">
								<b v-if="temp.a1 !== 0">￥{{ $init.numberFormat(temp.a1, 2, '.', ',') }}</b>
								<b v-if="temp.a2 !== 0">￥{{ $init.numberFormat(temp.a2, 2, '.', ',') }}</b>
								<b v-if="temp.a3 !== 0">￥{{ $init.numberFormat(temp.a3, 2, '.', ',') }}</b>
								<b v-if="temp.a4 !== 0">￥{{ $init.numberFormat(temp.a4, 2, '.', ',') }}</b>
								<b v-if="temp.a5 !== 0">￥{{ $init.numberFormat(temp.a5, 2, '.', ',') }}</b>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header">
						<span>订单备注</span>
					</div>
					<div class="card-body desc">
						<p style="color:red">{{ remarks }}</p>
					</div>
				</div>
				<div class="card">
					<div class="card-header">
						<span>订单说明</span>
					</div>
					<div class="card-body desc">
						<div v-html="template.shuoming"></div>
					</div>
				</div>
			</div>
			<div class="order-footer">
				<el-button-group class="btn">
					<el-button @click="close('/')" plain>
						<i class="icon el-icon-back"></i> 返回列表</el-button>
					<el-button @click="close(`/order/edit/${$route.params.id}`)" plain>
						<i class="icon el-icon-edit"></i> 编辑方案
					</el-button>
					<el-button @click="del()" plain>
						<i class="icon el-icon-delete"></i> 删除方案
					</el-button>
					<el-button @click="print()" plain>
						<i class="icon el-icon-printer"></i> 打印预览
					</el-button>
				</el-button-group>
			</div>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'Home',
	data() {
		return {
			visible: false,
			userinfo: '',
			token: '',
			data: '',
			checked: [],
			remarks: '',
			temp: { a1: 0, a2: 0, a3: 0, a4: 0, a5: 0 },
			ruleForm: {
				name: '我是标题',
				customerName: '梵天',
				customerAds: '湖南韶山',
				projectSize: 10,
				radio: '',
				projectDate: this.time(new Date()),
			},
			orderInfo: {},
			template: '',
			loading: false,
			printList: {
				a1: true,
				a2: false,
				a3: false,
				a4: false,
				a5: false
			}
		}
	},
	components: {

	},
	watch: {
		'data': {
			deep: true,
			handler: function (newV, oldV) { }
		}
	},
	directives: {
		numberOnly: {
			bind: function (el) {
				el.handler = function () {
					el.value = el.value.replace(/\D+/, '');
				}
				el.addEventListener('input', el.handler)
			},
			unbind: function (el) {
				el.removeEventListener('input', el.handler)
			}
		}
	},
	mounted() {
		let data = this.$storage.localGet('userinfo');
		let id = this.$route.params.id;

		if (data.logincode !== undefined) {
			this.userinfo = data;
			this.getorderdetail(id);
		} else {
			this.$router.push('/login');
		}
	},
	methods: {
		fangan(val) {
			let arr = {
				a1: false,
				a2: false,
				a3: false,
				a4: false,
				a5: false
			}
			for (let i = 0; i < val.length; i++) {
				switch (val[i]) {
					case '方案1':
						arr.a1 = true;
						break
					case '方案2':
						arr.a2 = true;
						break
					case '方案3':
						arr.a3 = true;
						break
					case '方案4':
						arr.a4 = true;
						break
					case '方案5':
						arr.a5 = true;
						break
				}
			}
			this.printList = arr;
		},
		print() {

			if (this.checked.length == 0) {
				return this.$message({
					message: '至少勾选一个打印预览方案',
					type: 'error'
				});
			} else {
				this.$confirm(`最多可同时打印3个设计方案，<br/>是否确认打印<span style="color:red;padding: 0 3px;font-weight:700">${this.checked}</span>${this.checked.length}个方案?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					dangerouslyUseHTMLString: true,
					type: 'warning'
				}).then(() => {
					this.$store.commit('printTips', { id: this.$route.params.id, list: this.printList, remarks: this.remarks });
					this.close(`/print/${this.$route.params.id}`);
				}).catch(() => { });
			}
		},
		del() {
			let vm = this;
			this.$confirm(`删除后不可恢复，<br />确定要删除该方案吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning'
			}).then(() => {
				vm.$api.init.delOrder(this.userinfo.logincode, this.$route.params.id).then(res => {
					let data = res.data;
					if (data.code == 0) {
						vm.$notify({
							message: '订单删除成功',
							type: 'success'
						});
						vm.close('/')
					} else if (data.code == 1111) {
						vm.logout();
					} else {
						vm.$message.error(data.msg);
					}
				})
			}).catch(() => { });
		},
		close(url) {
			this.$router.push(url);
		},
		// 关闭窗口
		logout() {
			let vm = this,
				arr = {
					password: '',
					username: '',
					checked: ''
				};
			vm.$router.push('/login');
			vm.$storage.localSet('userinfo', arr);
		},
		// 退出登录
		f(input) {
			if (input < 0) {
				console.log('error');
				this.$message.error('数量不能为负数');
				return
			} else {
				this.totals(this.data);
				this.$forceUpdate();
			}
		},
		// 计算方案
		totals(val) {
			let temp = { a1: 0, a2: 0, a3: 0, a4: 0, a5: 0 };
			for (let i = 0; i < val.length; i++) {
				for (let b = 0; b < val[i].data.length; b++) {
					temp.a1 += val[i].data[b].a1.num !== '' ? this.s2n(val[i].data[b].a1.num) * this.s2n(val[i].data[b].sellprice) : 0;
					temp.a2 += val[i].data[b].a2.num !== '' ? this.s2n(val[i].data[b].a2.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a3 += val[i].data[b].a3.num !== '' ? this.s2n(val[i].data[b].a3.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a4 += val[i].data[b].a4.num !== '' ? this.s2n(val[i].data[b].a4.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a5 += val[i].data[b].a5.num !== '' ? this.s2n(val[i].data[b].a5.num) * this.s2n(val[i].data[b].sellprice) : 0;;
				}
			}
			this.temp = temp;
			console.log(this.temp);
		},
		// 方案统计
		s2n(val) {
			return parseInt(val);
		},
		// 转换数字
		getorderdetail(id) {
			let vm = this;
			let arr1 = [];
			let arr2 = [];
			vm.total = [];
			vm.$api.init.getorderdetail(vm.userinfo.logincode, id).then(res => {
				let data = res.data;
				if (data.code == 0) {
					vm.data = data;
					vm.orderInfo = data;
					vm.userinfo = data.info;
					vm.remarks = data.info.beizhu;
					vm.template = data.templateObj;
					vm.template.shuoming = vm.template.shuoming.replace(/\r\n/g, '<br/>');

					vm.ruleForm = {
						name: data.templateObj.templatename,
						customerName: data.info.shejishi,
						customerAds: data.info.kehudizhi,
						projectSize: data.info.xitongmianji,
						projectDate: data.info.createtime,
						radio: data.info.righttype
					}
					vm.temp = {
						a1: data.info.fangantotal1,
						a2: data.info.fangantotal2,
						a3: data.info.fangantotal3,
						a4: data.info.fangantotal4,
						a5: data.info.fangantotal5
					}
					data = data.moduleProductList;
					for (let i = 0; i < data.length; i++) {
						if (data[i].type == 1) {
							arr1.push({
								id: data[i].mod_id,
								name: data[i].typename,
								data: []
							})
						}
						if (data[i].type == 2) {
							if (data[i].plan_num_1 == 0 && data[i].plan_num_2 == 0 && data[i].plan_num_3 == 0 && data[i].plan_num_4 == 0 && data[i].plan_num_5 == 0) {
								// console.log(data[i].name,null);
							} else {
								arr2.push(data[i])
							}

						}
					}
					setTimeout(() => {
						for (let b = 0; b < arr2.length; b++) {
							arr2[b].a1 = { num: arr2[b].plan_num_1, price: arr2[b].plan_price_1 };
							arr2[b].a2 = { num: arr2[b].plan_num_2, price: arr2[b].plan_price_2 };
							arr2[b].a3 = { num: arr2[b].plan_num_3, price: arr2[b].plan_price_3 };
							arr2[b].a4 = { num: arr2[b].plan_num_4, price: arr2[b].plan_price_4 };
							arr2[b].a5 = { num: arr2[b].plan_num_5, price: arr2[b].plan_price_5 };

							for (let c = 0; c < arr1.length; c++) {
								if (arr2[b].mod_id == arr1[c].id && arr2[b].type == 2) {
									arr1[c].data.push(arr2[b]);
								}
							}
						}
					}, 1000);
					vm.data = arr1;
				} else {
					vm.$alert(data.msg, '错误', {
						type: 'error',
						confirmButtonText: '确定',
						callback: action => {
							vm.$router.push('/')
						}
					});
				}
			})
		},
		//获取订单
		saverequest(data) {
			let vm = this;
			vm.$api.init.saverequest(vm.userinfo.logincode, data).then(res => {
				let data = res.data;
				if (data.code == 0) {
					vm.$notify({
						message: '恭喜您订单修改成功',
						type: 'success'
					});
					setTimeout(() => {
						this.close('/');
						vm.loading = false;
					}, 1000);
				} else {
					return this.$message({
						message: '客户名称不能为空',
						type: 'error'
					});
				}
			})
		},
		// 保存数据
		submitForm(form) {
			console.log(form);
			if (form.customerName == '') {
				return this.$message({
					message: '方案名称不能为空',
					type: 'error'
				});
			}
			else if (form.name == '') {
				return this.$message({
					message: '客户名称不能为空',
					type: 'error'
				});
			}
			else if (form.projectSize == '') {
				return this.$message({
					message: '项目面积不能为空',
					type: 'error'
				});
			}
			else {
				let product = [];
				let p = {};
				for (let i = 0; i < this.data.length; i++) {
					for (let b = 0; b < this.data[i].data.length; b++) {
						p = {
							order_id: this.orderInfo.info.id,
							product_id: this.data[i].data[b].product_id,
							plan_num_1: this.data[i].data[b].a1.num,
							plan_num_2: this.data[i].data[b].a2.num,
							plan_num_3: this.data[i].data[b].a3.num,
							plan_num_4: this.data[i].data[b].a4.num,
							plan_num_5: this.data[i].data[b].a5.num,
							plan_price_1: this.data[i].data[b].a1.num * this.data[i].data[b].sellprice,
							plan_price_2: this.data[i].data[b].a2.num * this.data[i].data[b].sellprice,
							plan_price_3: this.data[i].data[b].a3.num * this.data[i].data[b].sellprice,
							plan_price_4: this.data[i].data[b].a4.num * this.data[i].data[b].sellprice,
							plan_price_5: this.data[i].data[b].a5.num * this.data[i].data[b].sellprice
						}
						product.push(p);
					}
				}
				let arr = {
					beizhu: this.remarks,
					order_id: this.orderInfo.info.id,  // 方案ID
					template_id: this.template.id, // 方案模板ID
					ordername: form.name, // 方案名称
					kehudizhi: form.customerAds, // 客户地址
					kehuchenghu: form.customerName, // 客户称呼
					xitongmianji: form.projectSize,
					fanganriqi: form.projectDate,
					shejishi: this.userinfo.username,
					fangantotal1: this.temp.a1,
					fangantotal2: this.temp.a2,
					fangantotal3: this.temp.a3,
					fangantotal4: this.temp.a4,
					fangantotal5: this.temp.a5,
					righttype: form.radio,
					productList: product
				}
				console.log(arr);
				this.saverequest(arr);
			}
		},
		// 提交表单
		time(timestamp) {
			let date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let Y = date.getFullYear() + '-';
			let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		},
		// 转换时间
	}
}
</script>
<style lang="less" scoped>
.detail {
	width: 1200px;
	margin: 0 auto;
	padding: 10px 35px;
	background-color: #fff;

	.order-header {
		padding: 10px 0 20px;
		text-align: center;

		h3 {
			position: relative;

			i {
				font-size: 16px;
				margin-left: 5px;
				position: absolute;
				top: 15px;
			}

			/deep/.el-input__inner {
				border: 0;
				border-radius: 0;
				text-align: center;
				font-size: 25px;
				background-color: rgba(0, 0, 0, 0);
				border-bottom: 1px solid #ddd;
			}
		}

		p {
			color: #888;
			margin-top: 10px;
		}
	}

	.btn {
		width: 500px;
		display: block;
		text-align: center;
		margin: 30px auto;
		display: flex;

		.el-dropdown,
		.el-button {
			flex: 1;
			width: 100%;
			margin: 0 2px;
			border-radius: 5px;
			border-color: #409EFF;
			color: #409EFF;
		}
	}

	.info {
		border-radius: 0 0 8px 8px !important;

		ul {
			padding: 15px 0 15px;
			list-style: none;

			li {
				width: 50%;
				float: left;
				line-height: 40px;
				font-size: 14px;
				margin: -1px 0 0 -1px;
				border: 1px solid #333;
				display: flex;

				span {
					width: 100px;
					color: #333;
					display: block;
					flex-shrink: 0;
					text-align: center;
					border-right: 1px solid #333;
					background-color: #c7d3e6;
				}

				&:last-child {
					width: calc(100% - 1px);
				}

				/deep/.el-input__inner {
					border: 0;
					border-radius: 0;
				}

				/deep/.el-input-group__append {
					border: 0;
					background-color: #fff;
				}
			}
		}
	}

	.card {
		.card-header {
			height: 45px;
			line-height: 45px;
			font-weight: 700;
			color: #FA6400;
			cursor: pointer;
			user-select: none;

			.el-icon-arrow-right {
				transition: .3s;
				transform: rotate(0deg);
			}

			&.selected {
				.el-icon-arrow-right {
					transform: rotate(90deg);
				}
			}
		}
	}

	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;

		tr,
		td,
		th {
			padding: 8px 10px;
			font-size: 14px;
			text-align: center;
			border: 1px solid #333;
		}

		thead {
			background-color: #c7d3e6;
		}

		.thumb {
			width: 100%;
			display: block;
		}

		.name {
			width: 150px;
			font-weight: 500;
			background-color: #c7d3e6;
		}
	}

	.table-body,
	.table-head {
		display: flex;

		.name {
			width: 151px;
			font-weight: 500;
			background-color: #c7d3e6;
			padding: 8px 10px;
			font-size: 14px;
			text-align: center;
			border: 1px solid #333;
			border-bottom-width: 0;
		}

		.th,
		/deep/div.el-checkbox-group {
			flex: 1;
			display: flex;

			b,
			.el-checkbox {
				flex: 1;
				margin: 0;
				padding: 8px 10px;
				font-size: 14px;
				text-align: center;
				border: 1px solid #333;
				border-width: 1px 1px 0 0;

				&:first-child {
					width: calc(100% + 2px);
					flex-shrink: 0;
				}
			}
		}

		/deep/.el-checkbox-group {
			background-color: #c7d3e62f;
		}
	}

	.table-body {
		border-bottom: 1px solid #333;
	}

	.desc {
		font-size: 14px;
	}

	input.num {
		width: 30px;
		display: block;
		text-align: center;
		padding: 5px;
		border: 1px solid #eee;
		outline: none;
		border-radius: 3px;
		background-color: rgba(0, 0, 0, .05);
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);

		&:focus {
			color: #FA6400;
			border-color: #FA6400;
			background-color: #fa64001e;
			box-shadow: 0 0 0 2px rgba(250, 100, 0, 0.25);
		}
	}

	input[type=number] {

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}

		-moz-appearance: textfield;
	}

	.auth {
		margin: 15px 0;

		.el-radio-group {
			display: flex;

			.el-radio-button {
				flex: 1;
				display: block;
			}

			/deep/.el-radio-button__inner {
				width: 100%;
				display: block;
				border-radius: 0;
			}
		}
	}

	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background-color: #333;
		border-color: #333;
	}

	/deep/.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, .05);
	}

	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		box-shadow: -1px 0 0 0 #333;
	}

	/deep/.el-textarea__inner {
		border-radius: 0;
		border-color: #333;
	}

	.add {
		width: 100%;
		margin: 0 auto;
		display: block;
		border: 0;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;

		/deep/.el-input__inner {
			border: 0;
		}
	}
}</style>